.md .checkbox
  display: flex
  align-items: center
  margin-top: $gap-p
  margin-bottom: $gap-p
  &+.checkbox
    margin-top: 0 - $gap-p
  input
    transform: translate(0, -1px)
    -webkit-appearance: none
    -moz-appearance: none
    -ms-appearance: none
    -o-appearance: none
    appearance: none
    position: relative
    height: 16px
    width: 16px
    transition: all .15s ease-out 0s
    cursor: pointer
    display: inline-block
    outline: none
    border-radius: 2px
    flex-shrink: 0
    margin-right: 8px
    if hexo-config('tag_plugins.checkbox.interactive') != true
      pointer-events: none
  /* Checkbox */
  input[type=checkbox]
    &:before, &:after
      position: absolute
      content: ""
      background: #fff
    &:before
      left: 1px
      top: 5px
      width: 0px
      height: 2px
      transition: all .2s ease-in
      transform: rotate(45deg)
      -webkit-transform: rotate(45deg)
      -moz-transform: rotate(45deg)
      -ms-transform: rotate(45deg)
      -o-transform: rotate(45deg)
    &:after
      right: 7px
      bottom: 3px
      width: 2px
      height: 0px
      transition: all .2s ease-out
      transform: rotate(40deg)
      -webkit-transform: rotate(40deg)
      -moz-transform: rotate(40deg)
      -ms-transform: rotate(40deg)
      -o-transform: rotate(40deg)
      transition-delay: .25s
    &:checked
      &:before
        left: 0px
        top: 7px
        width: 6px
        height: 2px
      &:after
        right: 3px
        bottom: 1px
        width: 2px
        height: 10px
  &.minus input[type=checkbox]
    &:before
      transform: rotate(0)
      left: 1px
      top: 5px
      width: 0px
      height: 2px
    &:after
      transform: rotate(0)
      left: 1px
      top: 5px
      width: 0px
      height: 2px
    &:checked
      &:before
        left: 1px
        top: 5px
        width: 10px
        height: 2px
      &:after
        left: 1px
        top: 5px
        width: 10px
        height: 2px
  &.plus input[type=checkbox]
    &:before
      transform: rotate(0)
      left: 1px
      top: 5px
      width: 0px
      height: 2px
    &:after
      transform: rotate(0)
      left: 5px
      top: 1px
      width: 2px
      height: 0px
    &:checked
      &:before
        left: 1px
        top: 5px
        width: 10px
        height: 2px
      &:after
        left: 5px
        top: 1px
        width: 2px
        height: 10px
  &.times input[type=checkbox]
    &:before
      transform: rotate(45deg)
      left: 3px
      top: 1px
      width: 0px
      height: 2px
    &:after
      transform: rotate(135deg)
      right: 3px
      top: 1px
      width: 0px
      height: 2px
    &:checked
      &:before
        left: 1px
        top: 5px
        width: 10px
        height: 2px
      &:after
        right: 1px
        top: 5px
        width: 10px
        height: 2px
  /* Radio */
  input[type=radio]
    border-radius: 50%
    &:before
      content: ""
      display: block
      width: 8px
      height: 8px
      border-radius: 50%
      margin: 2px
      transform: scale(0)
      transition: all .25s ease-out
    &:checked:before
      transform: scale(1)
  /* Colors */
  input
    $c = convert(hexo-config('tag_plugins.checkbox.color')) || $color-theme
    border: 2px solid $c
    &[type=checkbox]:checked
      background: $c
    &[type=radio]:checked:before
      background: $c
  &.red input
    border-color: $color-mac-red
    &[type=checkbox]:checked
      background: $color-mac-red
    &[type=radio]:checked:before
      background: $color-mac-red
  &.green input
    border-color: $color-mac-green
    &[type=checkbox]:checked
      background: $color-mac-green
    &[type=radio]:checked:before
      background: $color-mac-green
  &.yellow input
    border-color: $color-mac-yellow
    &[type=checkbox]:checked
      background: $color-mac-yellow
    &[type=radio]:checked:before
      background: $color-mac-yellow
  &.cyan input
    border-color: $color-mac-cyan
    &[type=checkbox]:checked
      background: $color-mac-cyan
    &[type=radio]:checked:before
      background: $color-mac-cyan
  &.blue input
    border-color: $color-md-blue
    &[type=checkbox]:checked
      background: $color-md-blue
    &[type=radio]:checked:before
      background: $color-md-blue

article .checkbox
  p
    display: inline-block
    margin-top: 0 !important
    margin-bottom: 0 !important
